<script setup>
import {inject, ref} from 'vue';

const isMiniProgram = inject('isMiniProgram');

const activeTab = ref(1);
const control = ref(false);
const requestFullScreen = ref(false);
const plusMnusIcon = ref('plus');
const likeColor = ref('#fff');
const likestarIcon = ref('#fff');
const videoContext = uni.createVideoContext('myVideo');
const likeNumber = ref(456);
const starNumber = ref(123);
const shareNumber = ref(890);
const sgareTile = ref('这个是模拟分享数据');
const sgareid = ref(123)


const topTabs = [
  {id: 1, name: '短视频广场'},
  {id: 2, name: '广场'}
];


const changeTab = (tabId) => {
  console.log(tabId);
  activeTab.value = tabId
};

const fullClick = () => {
  if (!control.value) {
    videoContext.requestFullScreen();
    control.value = true
  } else {
    control.value = false
  }
};

const plusMnusClick = () => {
  if (plusMnusIcon.value === 'plus') {
    plusMnusIcon.value = 'check',
        uni.showToast({
          title: '关注成功',
          icon: 'none',
          duration: 2000
        })
  } else {
    plusMnusIcon.value = 'plus'
    uni.showToast({
      title: '取关成功',
      icon: 'none',
      duration: 2000
    })
  }
};

const likeIconClick = () => {
  if (likeColor.value === '#fff') {
    likeColor.value = 'rgba(236, 57, 74, 1)'
    likeNumber.value += 1
  } else {
    likeColor.value = '#fff'
    likeNumber.value -= 1
  }
};

const likestarIconClick = () => {
  if (likestarIcon.value === '#fff') {
    likestarIcon.value = 'rgba(247, 180, 50, 1)'
    starNumber.value += 1
  } else {
    likestarIcon.value = '#fff'
    starNumber.value -= 1
  }
};
const shareClcik = (res) => {
  if (res.from === 'button') {// 来自页面内分享按钮
    console.log(res.target)
  }
  return {
    title: sgareTile.value,
    path: '/pages/video/video?id=' + sgareid
  }
}
</script>
<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#000">
    <view class="nav-top">
      <fui-icon :size="48" color="#fff" name="plussign-fill"></fui-icon>
      <view class="navbar-tabs">
        <view v-for="item in topTabs" :key="item.id" :class="{ 'tabs-active': activeTab === item.id }" class="tab-item"
              @click="changeTab(item.id)">
          {{ item.name }}
        </view>
      </view>
      <fui-icon :size="48" :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" color="#fff"
                name="search"></fui-icon>
    </view>
  </fui-nav-bar>
  <view class="video">
    <video id="myVideo" :controls="control" :loop="true" :playsinline="true"
           :requestFullScreen="requestFullScreen" src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
    <view class="full-screen" @click="fullClick">
      <image src="/static/audio/Fullscreen.svg"/>
      <text>全屏观看</text>
    </view>
    <view class="user-name-box">
      <view style="padding: 20rpx">
        <view class="name">@用户名</view>
        <view class="lable">相关内容可以写在这里 # 标签 #标签 #标签</view>
      </view>
    </view>
    <view class="right-box">
      <view class="user-avatar" @click="plusMnusClick">
        <image class="avatar" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.LYRZ_nETF4W4VchbeGIP5gAAAA"/>
        <view class="plus-minux-box">
          <fui-icon :name="plusMnusIcon" color="rgba(255, 255, 255, 1)" unit="40.4496"></fui-icon>
        </view>
      </view>
      <view class="like-box">
        <fui-icon :color="likeColor" :size="80" name="like-fill" @click="likeIconClick"></fui-icon>
        <view>{{ likeNumber }}</view>
      </view>
      <view class="like-box">
        <fui-icon :color="likestarIcon" :size="80" name="star-fill" @click="likestarIconClick"></fui-icon>
        <view>{{ starNumber }}</view>
      </view>
      <button class="Share-box" open-type="share" @click="shareClcik">
        <fui-icon :size="60" color="#fff" name="share"></fui-icon>
        <view>{{ shareNumber }}</view>
      </button>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.nav-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;

  .navbar-tabs {
    width: 460rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    font-weight: 600;
  }

  .tabs-active {
    padding: 7rpx 12rpx;
    background: linear-gradient(302.79deg, #12868C 7.39%, #5DDAE0 71.89%, #A2FAFF 98.88%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999rpx;
  }
}

.video {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;

  #myVideo {
    width: 100%;
    height: 553.84rpx;
  }

  .full-screen {
    width: 176rpx;
    height: 58rpx;
    border: 2rpx solid rgba(153, 153, 153, 1);
    border-radius: 9999rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: rgba(255, 255, 255, 1);

    image {
      width: 24rpx;
      height: 24rpx;
    }

    text {
      font-size: 24rpx;
      font-weight: 400;
    }
  }

  .user-name-box {
    position: fixed;
    width: 100%;
    height: 170rpx;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    color: #fff;

    .name {
      font-size: 32rpx;
      font-weight: 500;
    }

    .lable {
      margin-top: 15rpx;
      font-size: 28rpx;
      font-weight: 500;
    }
  }

  .right-box {
    width: 114.42rpx;
    height: 705.16rpx;
    position: fixed;
    right: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    .user-avatar {
      width: 100%;
      height: 133.48rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar {
        width: 114.42rpx;
        height: 114.42rpx;
        border-radius: 9999rpx;
        position: relative;
      }

      .plus-minux-box {
        position: absolute;
        top: 100rpx;
        width: 34.96rpx;
        height: 34.96rpx;
        background: rgba(236, 57, 74, 1);
        border-radius: 9999rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
    }

    .like-box {
      width: 76.28rpx;
      height: 133.34rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;

      .like-icon {
        width: 71.08rpx;
        height: 62.32rpx;
      }

      view {
        color: #fff;
      }
    }

    .Share-box {
      width: 76.82rpx;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-direction: column;

      &::after {
        border: none;
      }

      view {
        margin-top: -60rpx;
        color: #fff;
      }
    }
  }
}
</style>
